<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <title>列表页</title>
    <link rel="stylesheet" th:href="@{/css/global.css}">
    <link rel="stylesheet" th:href="@{/css/details.css}">
</head>

<body>
    <div class="container">
         <div class="book-detail">
            <div class="book-info video-info clearfixs" style="margin-bottom: 10px" th:each="course : ${courseList}">
                <div class="book-img">
                    <img th:src="@{${course.picUrl}}" alt="">
                </div>
                <div class="book-sug">
                    <h3 th:text="${course.name}"></h3>
                    <p id="p_intro" style="min-height: 120px;margin-bottom: 20px;" th:text="${course.intro}"></p>
                    <div class="book-btns">
                        <a><span class="online-read" th:onclick="applyCourse([[${course.courseId}]])">课程报名</span></a>
                    </div>
                </div>
            </div>
         </div>
    </div>
    <script th:src="@{/js/jquery-3.3.1.min.js}"></script>
    <script th:inline="javascript">
        $(".qual-reading .qual-lable").on("click", " .qual-list ul li", function () {
            $(this).addClass("cur").siblings().removeClass("cur");
        })
        function applyCourse(courseId) {
            $.ajax({
                type: "post",
                url : "/viecourse/doVie",
                dataType:'json',
                data: {"courseId":courseId},
                success: function(data){
                    if(data.data == 0){
                        alert("排队确认中");
                    }
                }
            })
        }
    </script>
</body>

</html>